<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <style>
        .height25 {
            width: 100%;
            height: 2.5rem;
            background: #fff;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
        }

        .user_box {
            width: 100%;
            margin-top: 0rem;
        }

        #userOrder {
            width: 100%;
            position: fixed;
            top: 7rem;
            left: 0;
            z-index: 999;
            box-sizing: border-box;
            border-bottom: 1px solid #e5e5e5;
        }

        #userOrder .aui-tab-item {
            height: 4.5rem;
            line-height: 4.5rem;
        }

        #userOrder .aui-tab-item span {
            display: inline-block;
            color: #000;
            font-size: 1.4rem;
            letter-spacing: 0.05rem;
        }

        #userOrder .aui-tab-item.aui-active {
            border-bottom: none;
        }

        #userOrder .aui-tab-item.aui-active span {
            color: #ed6a20;
            box-sizing: border-box;
            border-bottom: 2px solid #ed6a20;
        }
        /***order_list_box***/

        .order_list_box {
            margin-top: 11.5rem;
            background: #f2f2f2;
        }

        .order_list {
            width: 100%;
            background: #fff;
            margin-bottom: 1rem;
        }

        .order_list_h {
            width: 100%;
            padding: 0 1.3rem;
        }

        .order_list_h h5 {
            float: left;
            line-height: 4rem;
            font-size: 1.4rem;
            color: #000;
            letter-spacing: 0.05rem;
        }

        .order_list_h h5 img {
            display: inline-block;
        }

        .order_list_h h5 img.img1 {
            width: 1.6rem;
            margin-right: 0.9rem;
            vertical-align: middle;
        }

        .order_list_h h5 img.img2 {
            width: 0.55rem;
            margin-left: 1rem;
            vertical-align: middle;
        }

        .order_list_h p {
            float: right;
            line-height: 4rem;
            font-size: 1.3rem;
            color: #ed6a20;
            letter-spacing: 0.05rem;
        }

        .order_list_p {
            width: 100%;
        }

        .order_list_g {
            padding: 0.6rem 1.3rem;
            background-color: #fafafa;
            border-bottom: 0.1rem solid #fff;
        }

        .order_list_img {
            width: 7.6rem;
            float: left;
        }

        .order_list_txt {
            width: calc(75% - 7.6rem);
            float: left;
            padding: 0 1.2rem;
        }

        .order_list_txt h5 {
            font-size: 1.3rem;
            line-height: 1.5rem;
            color: #333333;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .order_list_txt p {
            margin: 0.5rem 0;
            margin-bottom: 0.2rem;
        }

        .order_list_txt p span {
            font-size: 1.2rem;
            color: #999;
            margin-right: 0.2rem;
            line-height: 1;
        }

        .order_list_txt font {
            display: inline-block;
            font-size: 1rem;
            color: #ed6a20;
            line-height: 1;
            padding: 0.3rem 0.5rem;
            border-radius: 0.1rem;
            border: solid 1px #ed6a20;
        }

        .order_list_jg {
            float: right;
            text-align: right;
        }

        .order_list_jg h5 {
            font-size: 1.4rem;
            color: #333;
            line-height: 1;
            margin-bottom: 0.9rem;
        }

        .order_list_jg p {
            font-size: 1.4rem;
            color: #999;
            line-height: 1;
            position: relative;
            margin-bottom: 0.9rem;
        }

        .order_list_jg p::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 1px;
            background: #999;
            top: 50%;
            left: 0;
        }

        .order_list_jg span {
            font-size: 1.2rem;
            color: #999;
            line-height: 1;
        }

        .order_list_all {
            width: calc(100% - 2.6rem);
            margin: 0 auto;
            padding: 1.3rem 0;
            border-bottom: 1px solid #f1f1f1;
            text-align: right;
            line-height: 1;
            color: #3e4244;
            font-size: 1.2rem;
        }

        .order_list_all span {
            font-size: 1.5rem;
        }

        .order_list_btn {
            padding: 1rem 1.3rem;
            text-align: right;
        }

        .order_list_btn span {
            display: inline-block;
            font-size: 1.3rem;
            color: #3e4244;
            line-height: 1;
            padding: 0.75rem 1.2rem;
            border-radius: 1.4rem;
            border: solid 1px #9a9a9a;
            margin-left: 0.6rem;
        }

        .order_list_btn span:last-of-type {
            color: #ed6a20;
            border: solid 1px #ed6a20;
        }
        /***order_list_box***/
        /*支付模块css*/

        .pay-modular {
            /*背景*/
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            background: rgba(0, 0, 0, 0.5);
            z-index: 10;
            transition: 0.2s ease all
        }

        .modular-main {
            height: 43.95rem;
            width: 100%;
            float: left;
            position: absolute;
            bottom: 0;
            left: 0;
            background: #f2f2f2;
            border-radius: 1.25rem 1.25rem 0 0;
            /*transition: 0.5s ease all*/
            animation: myfirst 0.3s;
        }

        .modular-main-top {
            width: 100%;
            height: 4.6rem;
            box-sizing: border-box;
            border-bottom: 0.05rem solid #ebebeb;
            float: left;
            font-size: 1.8rem;
            line-height: 4.6rem;
            text-align: center;
            position: relative;
            border-radius: 1.25rem 1.25rem 0 0;
        }

        .pay-modular-colse {
            width: 1.3rem;
            height: 1.3rem;
            position: absolute;
            top: 1.6rem;
            left: 1.35rem;
        }

        @keyframes myfirst {
            0% {
                left: 0;
                bottom: -43.95rem;
            }
            100% {
                left: 0;
                bottom: 0;
            }
        }

        .modular-main-box {
            width: 100%;
            float: left;
        }

        .modular-select-pay {
            width: 100%;
            height: 39.35rem;
        }

        .modular-select-pay-money {
            width: 100%;
            height: 7.25rem;
            line-height: 7.25rem;
            font-size: 3.6rem;
            font-weight: 600;
            text-align: center;
            background: #fff;
            float: left;
        }

        .modular-select-list {
            width: 100%;
            float: left;
            background: #fff;
        }

        .modular-select-li {
            width: 100%;
            height: 6.05rem;
            float: left;
        }

        .li-img {
            width: 14.53%;
            float: left;
        }

        .li-content {
            width: 85.47%;
            float: left;
            height: 100%;
            position: relative;
            box-sizing: border-box;
            border-bottom: 0.05rem solid #ebebeb
        }

        .modular-select-li .li-content:last-child {
            border-bottom: none;
        }

        .li-content-title {
            width: 100%;
            height: 1.5rem;
            font-size: 1.5rem;
            line-height: 1.5rem;
            letter-spacing: 0.02rem;
            color: #171717;
            margin: 1.3rem 0 0.8rem 0;
        }

        .li-content-text {
            width: 100%;
            height: 1.1rem;
            font-size: 1.1rem;
            line-height: 1.1rem;
            color: #848689;
        }

        .alipay {
            width: 2.45rem;
            height: 2.45rem;
            margin: 1.85rem auto auto auto;
        }

        .weixinpay {
            width: 2.5rem;
            height: 2.5rem;
            margin: 1.75rem auto auto auto;
        }

        .h5pay {
            width: 3rem;
            height: 2.4rem;
            margin: 1.75rem auto auto auto;
        }

        .balancepay {
            width: 2.5rem;
            height: 2.5rem;
            margin: 1.85rem auto auto auto;
        }

        .li-content-check {
            float: right;
            display: inline-block;
            position: absolute;
            top: 2rem;
            right: 1.35rem;
        }

        .li-content-check img {
            width: 1.95rem;
            height: 1.95rem;
        }

        .modular-select-bottom {
            width: 100%;
            height: 7.9rem;
            float: left;
        }

        .modular-select-btn {
            width: 93%;
            height: 4rem;
            background-color: #ed6a20;
            border-radius: 1.98rem;
            margin: auto;
            font-size: 1.6rem;
            line-height: 4rem;
            text-align: center;
            color: #ffffff;
            margin: 2.4rem auto 0 auto;
        }

        .modular-ipt-password {
            height: 39.35rem;
            width: 100%;
            position: relative;
            float: left;
        }

        .ipt-password {
            width: 93%;
            height: 4.65rem;
            border-radius: 0.5rem;
            border: solid 0.05rem #888888;
            display: flex;
            margin: 2.7rem auto 1.25rem auto;
        }

        .ipt-password-i {
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 4.65rem;
            border-right: 0.05rem solid #888888;
        }

        .ipt-password .ipt-password-i:last-child {
            border-right: none;
        }

        .ipt-password-i .i-icon {
            width: 2rem;
            height: 2rem;
            margin: 1.325rem auto auto auto;
            background: #000;
            border-radius: 100%;
        }

        .forget {
            width: 100%;
            text-align: right;
            font-size: 1.5rem;
            line-height: 1.5rem;
            height: 1.5rem;
            color: #ed6a20;
            box-sizing: border-box;
            padding: 0 1.5rem;
        }

        .keyboard {
            width: 100%;
            float: left;
            position: absolute;
            bottom: 0;
            left: 0;
            background: #fff;
        }

        .keyboard-btn {
            width: 33.33%;
            float: left;
            height: 5.1rem;
            box-sizing: border-box;
            border-bottom: 0.05rem solid #8d8d8d;
            border-right: 0.05rem solid #8d8d8d;
        }

        .keyboard-btn-text {
            width: 100%;
            font-size: 2rem;
            line-height: 2rem;
            font-weight: 600;
            text-align: center;
            margin: 1rem 0 0 0;
            float: left;
        }

        .keyboard-btn-en {
            width: 100%;
            height: 0.85rem;
            line-height: 0.85rem;
            font-size: 0.85rem;
            text-align: center;
            float: left;
            margin: 0.6rem 0 0 0;
        }

        .text-zero {
            margin: 1.65rem 0 0 0;
        }

        .border-r-none {
            border-right: none;
        }

        .border-b-none {
            border-bottom: none;
        }

        .bgd2d5db {
            background: #d2d5db
        }

        .delete-num {
            width: 2.4rem;
            height: 1.7rem;
            margin: 1.95rem auto 0 auto;
        }

        .bgfff {
            background: #fff
        }

        .bgf2 {
            background: #f2f2f2
        }

        .pay-modular-arrow {
            width: 0.75rem;
            height: 1.45rem;
            position: absolute;
            top: 1.5rem;
            left: 1.3rem;
        }
        /*   loading    */

        .loading {
            width: 18.8%;
            height: 5.4rem;
            position: fixed;
            top: 40%;
            left: 42%;
            border-radius: 0.7rem;
            background: #000;
            opacity: 0.7;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .loading .loading_box {
            width: 100%;
            height: 2.4rem;
            line-height: 2.4rem;
            text-align: center;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="height25"></div>

        <header class="aui-bar aui-bar-nav aui-bar-light inner_header">
            <a class="aui-pull-left aui-btn" onclick="goBack()">
                <img src="../../image/back.png">
            </a>
            <div class="aui-title">我的订单</div>
            <a class="aui-pull-right aui-btn">
                <img src="../../image/user_order_search.png">
            </a>
        </header>

        <div class="aui-tab" id="userOrder">
            <div class="aui-tab-item aui-active"><span>全部</span></div>
            <div class="aui-tab-item"><span>待付款</span></div>
            <div class="aui-tab-item"><span>待发货</span></div>
            <div class="aui-tab-item"><span>待收货</span></div>
            <div class="aui-tab-item"><span>待评价</span></div>
        </div>

        <div class="aui-refresh-content">
            <!--order_list_box-->
            <div class="order_list_box">
                <div class="box">
                    <div class="order_list" v-for="(item_z,index) in new_list">
                        <div class="order_list_h clearfix">
                            <h5><img class="img1" src="../../image/user_order_shop.png">范特蓝旗舰店<img class="img2" src="../../image/go.png"></h5>
                            <p>{{item_z.order_status}}</p>
                        </div>
                        <div class="order_list_p" @click="goOrderInner(index)">
                            <div class="order_list_g clearfix" v-for="(item,key) in item_z.goods_list">
                                <div class="order_list_img">
                                    <img :src="item.goods_pic" width="100%">
                                </div>
                                <div class="order_list_txt">
                                    <h5>{{item.goods_name}}</h5>
                                    <p><span></span><span></span><span></span></p>
                                    <font>支持7天退换</font>
                                </div>
                                <div class="order_list_jg">
                                    <h5>￥{{item.goods_price}}</h5>
                                    <p>￥{{item.goods_allprice}}</p>
                                    <span>x{{item.goods_nums}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="order_list_all">
                            共
                            <font>{{item_z.goods_nums}}</font>件商品 合计:￥<span>{{item_z.total_fee}}</span>（含运费¥
                            <font>{{item_z.express_fee}}</font>）
                        </div>
                        <div class="order_list_btn">
                            <span @click="click_all(index)" v-if="item_z.text?true:false" ref="reftext">{{item_z.text}}</span>
                            <span @click="click_all2(index)" v-if="item_z.text2?true:false" ref="reftext2">{{item_z.text2}}</span>
                            <span @click="click_all3(index)" v-if="item_z.text3?true:false" ref="reftext3">{{item_z.text3}}</span>
                        </div>
                    </div>

                </div>

            </div>
            <!--/order_list_box-->
        </div>
        <!-- 支付模块 -->
        <div class="pay-modular" v-if="is_pay==0?false:true">
            <div class="modular-main">
                <div class="modular-main">
                    <div class="modular-main-top" :class="pay_modular==0?'bgfff':'bgf2'">
                        <img src="../../image/user/order_true/pay/close.png" alt="" class="pay-modular-colse" @click="close_pay_modular" v-if="pay_modular==0?true:false">
                        <img src="../../image/user/order_true/pay/arrow_2.png" alt="" class="pay-modular-arrow" @click="back_pay_modular" v-if="pay_modular==1?true:false"> {{pay_modular==0?"确认付款":"请输入支付密码"}}
                    </div>
                    <div class="modular-main-box">
                        <div class="modular-select-pay" v-if="pay_modular==0?true:false">
                            <div class="modular-select-pay-money">
                                ￥{{ order_all_money }}
                            </div>
                            <div class="modular-select-list">
                                <div class="modular-select-li" v-for="(item,key) in pay_function" @click="select_pay_fun(key)">
                                    <div class="li-img">
                                        <img :src="item.url" alt="" :class="item.en">
                                    </div>
                                    <div class="li-content">
                                        <div class="li-content-title">
                                            {{item.name}}
                                        </div>
                                        <div class="li-content-text">
                                            {{item.describe}}
                                        </div>
                                        <div class="li-content-check">
                                            <img :src="is_pay_fun==key?'../../image/user/order_true/pay/check_on.png':'../../image/user/order_true/pay/check_off.png'" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modular-select-bottom">
                                <div class="modular-select-btn" @click="open_pay_ipt">
                                    立即付款
                                </div>
                            </div>
                        </div>
                        <div class="modular-ipt-password" v-if="pay_modular==1?true:false">
                            <div class="ipt-password">
                                <div class="ipt-password-i" v-for="(item,key) in ipt_box">
                                    <div class="i-icon" v-if="item.num?true:false"></div>
                                </div>
                            </div>
                            <div class="forget">忘记密码？</div>
                            <div class="keyboard">
                                <div class="keyboard-btn" v-for="(item,key) in pay_num" :class="item.additional_class" @click="check_ipt(key)">
                                    <div class="keyboard-btn-text" v-if="key<11?true:false" :class="key==10?'text-zero':''">
                                        {{item.num}}
                                    </div>
                                    <div class="keyboard-btn-en" v-if="key<10?true:false">
                                        {{item.en}}
                                    </div>
                                    <img src="../../image/user/order_true/pay/delete.png" alt="" class="delete-num" v-if="key==11?true:false">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- loading框 -->
        <div class="loading" v-if="creatimg">
            <div class="loading_box">{{loading_text}}</div>
        </div>
    </div>
</body>

</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/axios.min.js"></script>
<script type="text/javascript" src="../../script/axios-config.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/sha1.js"></script>

<script type="text/javascript">
    apiready = function() {
        // setRefresh()
        new Vue({
            el: "#app",
            data: {
                list: [], // 用户信息
                goods_list: [], // 订单信息
                new_list: [], // 列表数组
                creatimg: false, // loading框
                loading_text: '', // loading内容
                is_pay: 0, //是否呼出输入弹窗 0=关闭 1弹出
                is_pay_fun: 0, //支付方式0-3 顺序选择
                pay_modular: 0, //0=选择支付方式 1=输入密码
                order_all_money: '', //金额
                out_trade_no: '', //支付号
                ipt_num: "",
                pay_function: [{
                    id: 1,
                    name: "支付宝",
                    describe: "支付宝安全支付",
                    url: "../../image/user/order_true/pay/alipay.png",
                    en: "alipay"
                }, {
                    id: 2,
                    name: "微信支付",
                    describe: "微信安全支付",
                    url: "../../image/user/order_true/pay/weixinpay.png",
                    en: "weixinpay"
                }, {
                    id: 3,
                    name: "银行卡支付",
                    describe: "推荐使用银行卡",
                    url: "../../image/user/order_true/pay/h5pay.png",
                    en: "h5pay"
                }, {
                    id: 4,
                    name: "余额支付",
                    describe: "推荐使用余额支付",
                    url: "../../image/user/order_true/pay/balancepay.png",
                    en: "balancepay"
                }, ],
                pay_num: [{
                    id: 1,
                    num: 1,
                    en: "",
                    additional_class: "",
                }, {
                    id: 2,
                    num: 2,
                    en: "A B C",
                    additional_class: "",
                }, {
                    id: 3,
                    num: 3,
                    en: "D E F",
                    additional_class: "border-r-none",
                }, {
                    id: 4,
                    num: 4,
                    en: "G H I",
                    additional_class: "",
                }, {
                    id: 5,
                    num: 5,
                    en: "J K L",
                    additional_class: "",
                }, {
                    id: 6,
                    num: 6,
                    en: "M N O",
                    additional_class: "border-r-none",
                }, {
                    id: 7,
                    num: 7,
                    en: "P Q R S",
                    additional_class: "",
                }, {
                    id: 8,
                    num: 8,
                    en: "T U V",
                    additional_class: "",
                }, {
                    id: 9,
                    num: 9,
                    en: "W X Y Z",
                    additional_class: "border-r-none",
                }, {
                    id: 10,
                    num: "",
                    en: "",
                    additional_class: "border-b-none bgd2d5db",
                }, {
                    id: 11,
                    num: 0,
                    en: "",
                    additional_class: "border-b-none",
                }, {
                    id: 12,
                    num: "-2",
                    en: "",
                    additional_class: "border-r-none border-b-none bgd2d5db",
                    url: "../../image/user/order_true/pay/delete.png"
                }, ],
                ipt_box: [{
                    num: ""
                }, {
                    num: ""
                }, {
                    num: ""
                }, {
                    num: ""
                }, {
                    num: ""
                }, {
                    num: ""
                }],
            },
            methods: {
                //输入按键
                check_ipt: function(key) {
                    var num = this.pay_num[key].num //获取按键
                    var ipt_num = this.ipt_num
                    var ipt_box = this.ipt_box
                    console.log(ipt_num.length)
                    if (num == -2) { //如果是删除键
                        if (ipt_num.length > 0) {
                            ipt_box[ipt_num.length - 1].num = ""
                            ipt_num = ipt_num.substring(0, ipt_num.length - 1)
                            console.log(ipt_num)
                                // console.log(ipt_box)
                            this.ipt_num = ipt_num;
                            this.ipt_box = ipt_box
                        }
                        return false
                    }
                    if (ipt_num.length < 6) {
                        ipt_num += String(num)
                        console.log(ipt_num)
                        var length = ipt_num.length
                        ipt_box[length - 1].num = num
                        this.ipt_num = ipt_num;
                        this.ipt_box = ipt_box
                        if (ipt_num.length == 6) {
                            this.walletPay(ipt_num)
                        }
                    }

                },
                //后退
                back_pay_modular: function() {
                    this.pay_modular = 0
                },
                //选择支付方式
                select_pay_fun: function(key) {

                    this.is_pay_fun = key;
                    console.log(this.is_pay_fun);
                },
                //切换输入密码
                open_pay_ipt: function() {
                    var is_pay_fun = this.is_pay_fun
                    if (is_pay_fun == 0) {
                        this.alipayPay();
                        return;
                    }
                    if (is_pay_fun == 1) {
                        this.wechatPay();
                        return;
                    }
                    if (is_pay_fun == 2) {
                        api.toast({
                            msg: '功能还在开发中，敬请期待',
                            duration: 2000,
                            location: 'bottom'
                        });
                    }
                    if (is_pay_fun == 3) { //如果为余额支付时
                        this.pay_modular = 1;
                        return;
                    }
                },
                //余额支付
                walletPay: function(pay_password) {
                    let data = {
                        token: $api.getStorage('token'),
                        out_trade_no: this.out_trade_no,
                        pay_password: pay_password,
                    }
                    console.log(JSON.stringify(data));
                    Axios.post(window.Url.walletPay, data).then((res) => {
                        console.log(JSON.stringify(res));

                        if (res.status == 0) {
                            this.ipt_box = [{
                                num: ""
                            }, {
                                num: ""
                            }, {
                                num: ""
                            }, {
                                num: ""
                            }, {
                                num: ""
                            }, {
                                num: ""
                            }]
                            this.ipt_num = ''
                        }

                        api.toast({
                            msg: res.info,
                            duration: 2000,
                            location: 'bottom'
                        });

                        if (res.status == 1) {
                            setTimeout(() => {
                                window.location.reload();
                            }, 1000)
                        }

                    }).catch((err) => {
                        api.alert({
                            msg: JSON.stringify(err)
                        });
                    })
                },
                //微信支付
                wechatPay: function() {
                    let weiXin = api.require('weiXin');
                    var $_this = this;
                    let data = {
                        token: $api.getStorage('token'),
                        out_trade_no: $_this.out_trade_no,
                        type: 0,
                    }
                    console.log(JSON.stringify(data));
                    Axios.post(window.Url.wechatPay, data).then((res) => {
                        if (res.status == 1) {
                            weiXin.payOrder({
                                orderId: res.prepayid,
                                partnerId: res.partnerid,
                                nonceStr: res.noncestr,
                                timeStamp: res.timestamp,
                                package: res.package,
                                sign: res.sign
                            }, function(ret, err) {
                                if (ret.status) {
                                    window.location.reload
                                } else {}
                            });
                        }
                    }).catch((err) => {
                        api.alert({
                            msg: JSON.stringify(err.info)
                        });
                    })

                },
                // 支付宝支付
                alipayPay: function() {
                    var $_this = this;
                    let data = {
                        token: $api.getStorage('token'),
                        out_trade_no: $_this.out_trade_no,
                        type: 0,
                    }
                    console.log(JSON.stringify(data))
                    Axios.post(window.Url.alipayPay, data).then((res) => {
                        console.log(JSON.stringify(res));
                        if (res.status == 1) {
                            console.log(res.info);
                            var aliPay = api.require('aliPay');
                            aliPay.payOrder({
                                // orderInfo: 'app_id=2018030502318781&biz_content=%7B%22body%22%3A%22%5Cu751f%5Cu610f%5Cu5e2eAPP%5Cu8d2d%5Cu7269%5Cu652f%5Cu4ed8%22%2C%22subject%22%3A%22%5Cu751f%5Cu610f%5Cu5e2eAPP%5Cu8d2d%5Cu7269%5Cu652f%5Cu4ed8%22%2C%22out_trade_no%22%3A%2220181107165426ba81697745%22%2C%22timeout_express%22%3A%2230m%22%2C%22total_amount%22%3A%220.01%22%2C%22product_code%22%3A%22QUICK_MSECURITY_PAY%22%7D&charset=UTF-8&format=json&method=alipay.trade.app.pay&notify_url=http%3A%2F%2Ft.shunshiniao.net%2FApi%2FApi%2FFreeshopping_alipayCallback&sign_type=RSA2&timestamp=2018-11-07+16%3A54%3A30&version=1.0&sign=lLAeCEu1gcr1MYQinm%2FJj72RFvVroTFj1HvVkiU%2BG07Vk1dubBDQJisK90Y%2FnYnjG5vMgKuWd9w7pLKHnJajl0gcGV%2FoXcM4aXh7yO1g1zYeEi861TbJZ1u87tTT9S%2B2kTVZLxFUx%2FV0ZWdPfhhj55cGOi9oeqT%2BYeF5VpxSSyy7R%2FyHfLGf6iFh4AgQbwgxyUeSA1kl1%2BudKnc67YcmSzPVNLq3kiVpU1agaDixc1IDULs1TOeI978HLS%2B%2FWcpx7%2FGiG1RfSS0ttaaAzVpr3ZUnVz7UmK1LstVHusK6T7P2FNndFzZUHUJX28TlPM9K1SXbnT%2FPqaJGdxle%2FlDJeg%3D%3D'
                                orderInfo: res.info
                            }, function(ret, err) {
                                api.alert({
                                    title: '支付结果',
                                    msg: ret.code,
                                    buttons: ['确定']
                                });
                                window.location.reload
                            });
                        }
                    }).catch((err) => {
                        console.log(JSON.stringify(err));
                        api.alert({
                            msg: JSON.stringify(err)
                        });
                    })

                },
                //关闭弹窗
                close_pay_modular: function() {
                    this.is_pay = 0;
                },
                // 订单的状态,信息的第一个点击事件
                click_all: function(index) {
                    var that = this
                        // console.log(id)                                           //获取当前的订单状态的索引值
                    console.log(index) //获取当前订单的索引值
                    var token = $api.getStorage('token'); //获取用户token
                    var order_status = that.new_list[index].order_status //先拿到当前的订单状态
                    console.log(order_status)
                    order_no = that.new_list[index].order_no //先拿到当前的订单编号
                    console.log('订单编号' + order_no)
                    var data = { //(订单详情,取消订单,确认收货,查看物流,提醒发货)的共用data
                        token: token,
                        order_no: order_no
                    }
                    var text = that.new_list[index].text //当前订单,改变订单状态的第一个名字
                    var text2 = that.new_list[index].text2 //当前订单,改变订单状态的第二个名字
                    var text3 = that.new_list[index].text3 //当前订单,改变订单状态的第三个名字
                    if (order_status == '已取消') { //订单在已取消状态下，执行相应订单操作
                        // 已取消
                    }
                    if (order_status == '待付款' && text == '取消订单') { //订单在待付款状态下，执行相应订单操作
                        // 取消订单
                        console.log('取消订单')
                        Axios.post(window.Url.cancle_order, data).then(function(res) {
                            console.log(JSON.stringify(res));
                            if (res.status == 1) {
                                that.creatimg = true
                                that.loading_text = '取消成功 √'
                                setTimeout(res => {
                                    that.creatimg = false
                                    var new_list = that.new_list[index]
                                    Vue.delete(new_list, 'text')
                                    Vue.delete(new_list, 'text2')
                                    Vue.delete(new_list, 'order_status')
                                    new_list["order_status"] = '交易关闭'
                                    new_list["text"] = '删除订单'
                                    that.order_status = '交易关闭'
                                }, 1000)
                            } else if (res.status == 0) {
                                that.creatimg = true
                                that.loading_text = '订单已取消 √'
                                setTimeout(res => {
                                    that.creatimg = false
                                }, 1000)
                            }
                        })
                    } else if (order_status == '交易关闭' && text == '删除订单') {
                        that.new_list.splice(0, 1)
                    }

                    if (order_status == '待发货' && text == '提醒发货') {
                        // 取消订单
                        console.log('提醒发货')
                        Axios.post(window.Url.remind_order_shipping, data).then(function(res) {
                            console.log(JSON.stringify(res));
                            if (res.status == 1) {
                                that.creatimg = true
                                that.loading_text = '提醒成功 √'
                                setTimeout(res => {
                                    that.creatimg = false
                                }, 1000)
                            }
                            if (res.status) {
                                that.creatimg = true
                                that.loading_text = '订单未支付 X'
                                setTimeout(res => {
                                    that.creatimg = false
                                }, 1000)
                            }
                        })
                    }

                    if (order_status == '待收货' && text == '查看物流') {
                        // 查看物流
                        console.log('查看物流')
                        Axios.post(window.Url.get_order_express, data).then(function(res) {
                            console.log(JSON.stringify(res));
                            if (res.status == 1) {
                                api.openWin({
                                    name: 'user_wl',
                                    url: './user_wl.html',
                                    pageParam: {
                                        name: 'test'
                                    }
                                });
                            } else {
                                console.log('查看物流失败')
                            }
                        })
                    }

                    if (order_status == '交易成功/待评价' && text == '删除订单') {
                        // 查看物流
                        console.log('删除订单')
                        that.new_list.splice(0, 1)
                    }

                    if (order_status == '交易完成' && text == '删除订单') {
                        // 查看物流
                        console.log('删除订单')
                        that.new_list.splice(0, 1)
                    }

                },
                // 订单的状态,信息的第二个点击事件
                click_all2: function(index) {
                    var that = this
                    var token = $api.getStorage('token'); //获取用户token
                    var order_status = that.new_list[index].order_status //先拿到当前的订单状态
                    console.log(order_status)
                    order_no = that.new_list[index].order_no //先拿到当前的订单编号
                    console.log('订单编号' + order_no)
                    var data = { //(订单详情,取消订单,确认收货,查看物流,提醒发货)的共用data
                        token: token,
                        order_no: order_no
                    }
                    var text = that.new_list[index].text //当前订单,改变订单状态的第一个名字
                    var text2 = that.new_list[index].text2 //当前订单,改变订单状态的第二个名字
                    var text3 = that.new_list[index].text3 //当前订单,改变订单状态的第三个名字
                    if (order_status == '待付款' && text2 == '立即付款') {
                        var data_sure = {
                            token: token,
                            type: 0,
                            order_no: order_no
                        }
                        Axios.post(window.Url.before_pay_info, data_sure).then(function(res) {
                            console.log(JSON.stringify(res));
                            if (res.status == 1) {
                                that.out_trade_no = res.out_trade_no //订单支付编号
                                that.is_pay = 1;
                                that.order_all_money = that.list[index].total_fee
                                console.log(JSON.stringify(that.list[index].total_fee))

                            }
                        })
                    }

                    if (order_status == '待收货' && text == '延长收货') {
                        // 查看物流
                        console.log('延长收货')
                    }

                    if (order_status == '交易成功/待评价' && text == '查看物流') {
                        // 查看物流
                        console.log('查看物流')
                        Axios.post(window.Url.get_order_express, data).then(function(res) {
                            console.log(JSON.stringify(res));
                            if (res.status == 1) {
                                api.openWin({
                                    name: 'user_wl',
                                    url: './user_wl.html',
                                    pageParam: {
                                        name: 'test'
                                    }
                                });
                            } else {
                                console.log('查看物流失败')
                            }
                        })
                    }

                    if (order_status == '交易完成' && text2 == '查看物流') {
                        // 查看物流
                        console.log('查看物流')
                        Axios.post(window.Url.get_order_express, data).then(function(res) {
                            console.log(JSON.stringify(res));
                            if (res.status == 1) {
                                api.openWin({
                                    name: 'user_wl',
                                    url: './user_wl.html',
                                    pageParam: {
                                        name: 'test'
                                    }
                                });
                            } else {
                                console.log('查看物流失败')
                            }
                        })
                    }
                },
                // 订单的状态,信息的第三个点击事件
                click_all3: function(index) {
                    var that = this
                    var token = $api.getStorage('token'); //获取用户token
                    var order_status = that.new_list[index].order_status //先拿到当前的订单状态
                    console.log(order_status)
                    order_no = that.new_list[index].order_no //先拿到当前的订单编号
                    console.log('订单编号' + order_no)
                    var data = { //(订单详情,取消订单,确认收货,查看物流,提醒发货)的共用data
                        token: token,
                        order_no: order_no
                    }
                    var text = that.new_list[index].text //当前订单,改变订单状态的第一个名字
                    var text2 = that.new_list[index].text2 //当前订单,改变订单状态的第二个名字
                    var text3 = that.new_list[index].text3 //当前订单,改变订单状态的第三个名字
                    if (order_status == '待收货' && text3 == '确认收货') {
                        // 查看物流
                        console.log('确认收货')
                        Axios.post(window.Url.confirm_order, data).then(function(res) {
                            console.log(JSON.stringify(res));
                        })
                    }

                    if (order_status == '交易成功/待评价' && text3 == '晒图评价') {
                        // 晒图评价
                        console.log('晒图评价,没有页')
                    }

                    if (order_status == '交易完成' && text3 == '追加评价') {
                        // 追加评价
                        console.log('晒图评价,没有页')
                    }
                },
                // 订单详情
                goOrderInner: function(index) {
                    console.log(index)
                    var order = this.new_list[index].order_no //先拿到当前的订单编号
                    console.log(order)
                    api.openWin({
                        name: 'user_order_inner',
                        url: './user_order_inner.html',
                        pageParam: {
                            order_s: order
                        }
                    });
                }
            },
            mounted: function() {
                id = api.pageParam.id + 2;
                // console.log(id)
                var token = $api.getStorage('token');
                status = api.pageParam.id + 1 // 订单状态 0 全部 1待付款 2待发货 3待收货 4待评价
                    // console.log(status)
                var data = {
                        token: token,
                        status: status,
                        page: "1"
                    }
                    // console.log(JSON.stringify(data))
                    //订单列表
                var that = this
                Axios.post(window.Url.order_list, data).then(function(res) {
                    //   console.log(JSON.stringify(res));
                    var list = res.list //返回的数组
                    var new_list = for_shop_list(list) //给订单添加功能
                    // console.log(JSON.stringify(new_list))
                    that.new_list = new_list

                })
                var tab = new auiTab({
                    element: document.getElementById("userOrder"),
                    index: id,
                    repeatClick: false
                }, function(ret) {
                    console.log(ret.index);
                    if (ret.index) {
                        var status = ret.index-1
                        var data = {
                            token: token,
                            status: status,
                            page: "1"
                        }
                        Axios.post(window.Url.order_list, data).then(function(res) {
                            console.log(JSON.stringify(res));
                            var list = res.list //返回的数组
                            var new_list = for_shop_list(list) //给订单添加功能
                            that.new_list = new_list
                        })
                    }
                });
            }
        })
    }

    function for_shop_list(list) {   //循环订单
        for (var i = 0; i < list.length; i++) { //循环订单
            list[i] = change_btn(list[i]) //改变状态按钮
        }
        return list
    }

    function change_btn(list) {  //根据订单状态改变按钮
        var change_status = list.order_status //订单状态
        switch (change_status) {
            case '0':
                list["order_status"] = '已取消';
                return list
                break;
            case '1':
                list["text"] = '取消订单';
                list["text2"] = '立即付款';
                list["order_status"] = '待付款';
                return list
                break;
            case '2':
                list["text"] = '查看物流';
                // list["text2"] = '延长收货';
                // list["text3"] = '确认收货';
                list["order_status"] = '待发货';
                return list
                break;
            case '3':
                list["text"] = '删除订单';
                list["text2"] = '延长收货';
                list["text3"] = '确认收货';
                list["order_status"] = '待收货';
                return list
                break;
            case '4':
                list["text"] = '删除订单';
                list["text2"] = '查看物流';
                list["text3"] = '晒图评价';
                list["order_status"] = '交易成功/待评价';
                return list
                break;
            default:

        }
    }

    //刷新
    function setRefresh() {
        var pullRefresh = new auiPullToRefresh({
            container: document.querySelector('.aui-refresh-content'),
            triggerDistance: 100
        }, function(ret) {

            if (ret.status == "success") {
                setTimeout(function() {
                    pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                }, 1500)
            }
        })
    }





    function goBack() {
        api.closeWin({

        });
    }
</script>
